<template>
  <div class="count-report" v-if="async">
    <div>
      <ve-line chartDataZoomType="slider" :dimension="dimension" :data="chartData" digit="8" :colors="colors"
        :extraMetrics="extraMetrics" :metrics="metrics" style="height: 600px;"></ve-line>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'dataModel',
    event: 'change'
  },
  props: {
    dataModel: {}
  },
  data() {
    return {
      viewModel: '',
      chartData: {},
      dimension: '日期',
      metrics: ['访问用户'],
      extraMetrics: ['下单用户', '下单率'],
      colors: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
      grid: {
        show: true,
        height: 340,
        backgroundColor: '#fff',
        borderColor: '#fff'
      },
      async: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.chartData = this.dataModel
      this.async = true
    },
    // 设置颜色
    tableRowClassName({
      row,
      rowIndex
    }) {
      if ((rowIndex % 2) === 0) {
        return ''
      } else {
        return 'success-row'
      }
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.init()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.pagination-list {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
